<template>
  <div>
    <head-top></head-top>
    <form id="page">
      <div style="margin-bottom: 30px;">请填写需要开通的账号信息</div>
      <div class="message">
        <div class="form__list">
          <div class="title">账号：</div>
          <el-input v-model="username" style="width: 260px" placeholder="请输入账号"></el-input>
        </div>
        <div class="form__list">
          <div class="title">手机号：</div>
          <el-input v-model="mobile" style="width: 260px" placeholder="请输入手机号"></el-input>
        </div>
        <div class="form__list">
          <div class="title">密码：</div>
          <el-input v-model="password" style="width: 260px" placeholder="请输入密码"></el-input>
        </div>

        <div class="form__list">
          <div class="title">账户类型：</div>
          <el-select v-model="value"  placeholder="请选择">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
          </el-select>
        </div>
        <el-button class="btn" type="primary" @click="submitForm">确认开通</el-button>
      </div>

    </form>
  </div>
</template>

<script>
import headTop from "../components/headTop";
// import dtime from "time-formater";
import { regist } from "@/api/getData";
export default {
  data() {
    return {
      options: [
        {
          value: "2",
          label: "管理员"
        },
        {
          value: "3",
          label: "普通用户"
        }
      ],
      username: '',
      mobile: '',
      password: '',
      value: ''
    };
  },
  components: {
    headTop
  },
  mounted() {
    this.initData();
  },
  computed: {},
  methods: {
    initData() {},
    async submitForm() {
      if (!this.username) return alert('请输入账号')
      else if (!this.mobile) return alert('请输入手机号')
      else if (!this.password) return alert('请输入密码')
      else if (!this.value) return alert('请选择用户类型')
      const res = await regist({
        username: this.username,
        mobile: this.mobile,
        password: this.password,
        identityType: this.value
      })
      console.log(res);
    }
  }
};
</script>

<style lang="less">
@import "../style/mixin";
#page {
  padding: 40px;
}

.form__list {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  .title {
      width: 80px;
  }
}
</style>
